import React, { useState, useEffect, useRef } from "react";

// 创建了一个第一次不执行的useEffect
// 用useRef可以来定义那些不显示在页面上的变量
const useWatch = (cb, arr) => {
  const flag = useRef(false);
  useEffect(() => {
    if (flag.current) {
      cb();
    } else {
      flag.current = true;
    }
    // eslint-disable-next-line
  }, arr);
};

const App = () => {
  const [count, setCount] = useState(1);

  useWatch(() => {
    console.log(count);
  }, [count]);

  return (
    <>
      <h2>useWatch</h2>

      <p>count: {count}</p>
      <button onClick={() => setCount((v) => v + 1)}>btn</button>
    </>
  );
};

export default App;
